export const addRibbonCard = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addRibbonCard', {
        model: {
            defaults: {
                name: 'addRibbonCard',
                droppable: true,
                attributes: {
                    class:'ribbon'
                },
                components: [{
                    tagName:'div',
                    attributes: {
                        class:'ribbon-content'
                    }
                },
                {
                    type:'text',
                    tagName:'span',
                    attributes: {
                        class:'ribbon-ornament'
                    },
                    content:`丝带`
                }],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                },
                styles: `
                    .ribbon {
                        top: -8px;
                        right: -8px;
                        width: 450px;
                        height: 250px;
                        overflow: hidden;
                        padding:10px;
                        background-color: var(--content-bg-color);
                        border-radius: 5px;
                        background-color:rgb(249, 249, 249);
                        }
                        .ribbon:hover{
                            box-shadow:rgba(0, 0, 0, 0.2) 0px 4px 8px;
                        }
                        .ribbon-ornament {
                           top: 20%;
                            right: -40%;
                            z-index: 2;
                            width: 150%;
                            height: 40px;
                            overflow: hidden;
                            transform: rotate(45deg);
                            border: 1px dashed;
                            box-shadow: 0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
                            background: #57DD43;
                            margin:35px 0px 0px 55px;
                            /* 文本居中 */
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: white;
                        }
                        .ribbon-content{
                            position:absolute;
                            width: 430px;
                            height: 230px;
                        }
                `},
                init() {
                    
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-ribbonCard', {
        label: '丝带卡片',
        category: '其他类',
        media: `<svg t="1720874144864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16077" width="30" height="30"><path d="M85.333333 955.733333a17.066667 17.066667 0 0 1-15.854933-23.3984L152.285867 725.333333 69.4784 518.3488a17.1008 17.1008 0 0 1 13.073067-23.1936L238.933333 469.3504V341.333333a17.066667 17.066667 0 0 1 14.267734-16.827733L665.6 256.034133V128a17.066667 17.066667 0 0 1 14.267733-16.827733l256-42.666667a17.066667 17.066667 0 1 1 18.7904 22.818133l-82.926933 221.422934 82.6368 192.529066a17.117867 17.117867 0 0 1-12.817067 23.569067L785.066667 555.434667V682.666667a17.066667 17.066667 0 0 1-14.2336 16.827733L358.4 768.785067V896a17.066667 17.066667 0 0 1-14.250667 16.827733l-256 42.666667A17.578667 17.578667 0 0 1 85.333333 955.733333z m23.739734-430.353066l77.448533 193.621333c1.621333 4.061867 1.621333 8.6016 0 12.663467l-74.069333 185.1904L324.266667 881.544533v-107.178666l-65.570134 10.478933A17.066667 17.066667 0 0 1 238.933333 768V503.9616l-129.860266 21.418667zM273.066667 697.122133v50.858667l65.501866-10.478933L750.933333 668.228267V617.472l-477.866666 79.650133z m0-213.282133v178.670933l477.866666-79.633066v-41.591467-179.797333l-477.866666 79.650133v42.7008z m512-142.1824v179.1488l129.365333-21.998933-76.782933-178.8928a17.066667 17.066667 0 0 1-0.3072-12.714667l74.973866-200.174933L699.733333 142.455467v107.8272l65.399467-11.1104A17.083733 17.083733 0 0 1 785.066667 256v85.6576z m-512 14.148267v50.722133l477.866666-79.650133v-50.653867l-65.365333 11.1104-0.1024 0.017067L273.066667 355.805867z" p-id="16078"></path></svg>`,
        content: {
            type: 'addRibbonCard'
        },
    });
};